import React, { Component } from "react";
import axios from "axios";

import "./index.css";

export default class index extends Component {
  myRef = React.createRef();

  search = () => {
    const {
      myRef: {
        current: { value: keyWords },
      },
    } = this;

    this.props.updateAppState({ isFirst: false, isLoading: true });

    axios({
      method: "GET",
      url: `http://localhost:3000/api/search/users?q=${keyWords}`,
    })
      .then((res) => {
        this.props.updateAppState({
          isLoading: false,
          userInfo: res.data.items,
        });
      })
      .catch((err) => {
        this.props.updateAppState({
          isLoading: false,
          errorMessage: err.message,
        });
      });
  };

  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input
            ref={this.myRef}
            type="text"
            placeholder="enter the name you search"
          />
          &nbsp;<button onClick={this.search}>Search</button>
        </div>
      </section>
    );
  }
}
